[#include "/mall/common/default.html" /]
<style>
    #search_bar {
        border: 0;
    }

    .goods-list .weui-col-25 {
        position: relative;
        font-size: 1.2rem;
        color: #999999;
    }

    .active {
        color: #09BB07 !important;
    }

    .active span {
        border-top-color: #09BB07;
        border-bottom-color: #09BB07;
    }

    .triangle-up {
        width: 0px;
        height: 0px;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 6px solid;
        float: right;
        margin-top: 11px;
        margin-right: 15px;
        margin-left: -20px;
    }

    .triangle-down {
        position: absolute;
        top: 20px;
        right: 15px;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 6px solid;
    }

    #search_bar {
        width: 90%;
        float: right;
    }

    #J_filtrate {
        width: 100%;
        margin-bottom: 20px;
    }

    .goods-list .goods-wrap .goods-item {
        padding: 1rem;
    }

    .goods-list .goods-wrap .goods-item::after {
        visibility: visible;
        padding-top: 1rem;
        border-bottom: 1px solid #DEDEDE;
    }

    .goods-list .goods-item .picture {
        float: left;
        width: 35%;
        margin-right: 1rem;
    }

    .goods-item .goods-item-info {
        float: left;
        width: 60%;
        text-align: right;
        padding-right: 0.1rem;
    }

    .goods-item .goods-item-info .title {
        /* height: 44px; */
        margin-bottom: 1rem;
        overflow: hidden;
        font-size: 18px;
        font-weight: bold;
    }

    .goods-item .goods-item-info .appraise {
        color: #9A9A9A;
        font-size: 12px;
    }

    .active span.down-ionic {
        background-image: url(${ctxPath}/resources/weixin/images/arrow-down-active.png);
    }

    .down-ionic {
        padding-left: 8px;
        padding-right: 8px;
        margin-left: 2px;
        background-image: url(${ctxPath}/resources/weixin/images/arrow-down.png);
        background-position: 100% 100%;
        background-size: 100% 100%;
    }

    #J_form > .weui_search_inner {
        padding-right: 0;
    }

    #nav-btn {
        width: 10%;
        float: left;
        height: 44px;
        background-color: #EFEFF4;
    }

    #nav-btn > img {
        position: absolute;
        top: 12px;
        width: 22px;
        height: auto;
        margin-left: 12px;
    }

    .sclassify {
        position: absolute;
        top: 37px;
        font-size: 12px;
    }

    .sclassify::before {
        content: "";
        display: block;
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 8px solid #fff;
        margin-left: 15px;
    }

    .sclassify li {
        width: 120px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background-color: rgba(255, 255, 255, 1);
        border-bottom: 1px solid #EFEFF4;
    }

    .sclassify li img {
        position: relative;
        top: 3px;
        left: 25px;
        right: 5px;
        display: inline;
        width: 18px;
        margin-right: 30px;
    }

    .weui_tab_bd {
        position: absolute;
    }

    .curtain {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        display: none;
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 10;
    }

    .goods-item-info > .add-shopping {
        font-size: 9px;
        line-height: 12px;
        text-align: right;
    }

    .weui_tab_bd {
        position: relative;
    }

    .weui_btn.weui_btn_mini {
        line-height: 1.6;
        font-size: 12px;
        padding: 0 .75em;
        display: inline-block;
    }

    .goods-information {
        float: left;
        font-size: 14px;
        color: #444;
    }

    .list1 {
        list-style: none;
        margin-left: 30%;
    }

    .list1 li {
        float: left;
        cursor: pointer;
    }

    textarea {
        margin-left: 15%;
    }

    .weui_btn {
        margin-top: 10px;
        margin-left: 30%;
    }

    .weui_btn + .weui_btn {
        margin-left: 10px;
        margin-top: 10px;
    }

    .content-padded a {
        color: #fff;
    }
</style>
<div class="content goods-list">
    <div id="goods-list" class="goods-wrap">
        <div class="goods-item f-cb">
            <a href="${ctxPath}/weixin/product/detail?id=${products.id}"><img class="picture" src="${image}" width="120"
                                                                              height="120"/></a>
            <div class="goods-item-info">
                <div class="title">${products.name}</div>
                <div class="price">${products.price}</div>
                [#if setting.isShowMarketPrice]
                <div class="price" style="color: #787878; font-size: 12px;text-decoration:line-through;">
                    ${products.marketPrice}
                </div>
                [/#if]

            </div>
        </div>
    </div>
</div>

<div class="goods-information">
    <div>
        <span>评&nbsp;&nbsp;&nbsp;&nbsp;价:&nbsp;</span>
        <ul class="list1">
            <li><img src="${ctxPath}/resources/weixin/images/xx.png" alt=""></li>
            <li><img src="${ctxPath}/resources/weixin/images/xx.png" alt=""></li>
            <li><img src="${ctxPath}/resources/weixin/images/xx.png" alt=""></li>
            <li><img src="${ctxPath}/resources/weixin/images/xx.png" alt=""></li>
            <li><img src="${ctxPath}/resources/weixin/images/xx.png" alt=""></li>
        </ul>
    </div>

</div>
<br/>
<br/>
<input type="hidden" name="score" value="" class="s1"/>
<input type="hidden" name="productId" value="${id}"/>
<textarea id="content" name="content" rows="4" cols="30">
</textarea>
<div class="content-padded f-cb">
    <a href="javascript:void(0)" onclick="btnSubmit();" class="weui_btn weui_btn_mini weui_btn_warn">发 表</a>
</div>
[#include "/mall/common/script.html"/]
<script type="text/javascript">
    function btnSubmit() {
        var score = $(".s1").val();
        var content = $("#content").val();
        if (score != '' && content != '') {
            $.ajax({
                type: "post",
                url: "${ctxPath}/weixin/review/save",
                data: {productId:${id}, score: score, content: content, orderId:${orderId}},
                async: true,
                success: function (data) {
                    $.toast(data.content, "text");
                    location.href = "${ctxPath}/weixin/order/list";
                }
            });
        } else {
            $.toast("请填写评论", "text");
        }

    }

    $(function () {
        var aLi = $('.list1 li');
        var leng = aLi.length;
        var arr = ['1', '2', '3', '4', '5'];
        var arr2 = ['${ctxPath}/resources/weixin/images/xx.png', '${ctxPath}/resources/weixin/images/xx.png', '${ctxPath}/resources/weixin/images/xx.png', '${ctxPath}/resources/weixin/images/xx.png', '${ctxPath}/resources/weixin/images/xx.png'];
        var s1 = '';

        aLi.click(function () {
            var i = $(this).index();
            if (i < 2) {
                for (var j = 0; j <= i; j++) {
                    aLi.eq(j).find('img').attr('src', '${ctxPath}/resources/weixin/images/cha.png');
                    s1 = arr[i];
                    arr2[j] = aLi.eq(j).find('img').attr('src');
                }
            } else {
                for (var j = 0; j <= i; j++) {
                    aLi.eq(j).find('img').attr('src', '${ctxPath}/resources/weixin/images/hao.png');
                    s1 = arr[i];
                    arr2[j] = aLi.eq(j).find('img').attr('src');
                }
            }
            ;

            for (var k = i + 1; k < leng; k++) {
                arr2[k] = '${ctxPath}/resources/weixin/images/xx.png';
            }
            ;
            $('.s1').val(s1);
        });

        aLi.hover(function () {
            for (var j = 0; j < leng; j++) {
                aLi.eq(j).find('img').attr('src', '${ctxPath}/resources/weixin/images/xx.png');
            }
            ;
            var i = $(this).index();
            if (i < 2) {
                for (var j = 0; j <= i; j++) {
                    aLi.eq(j).find('img').attr('src', '${ctxPath}/resources/weixin/images/cha.png');
                    $('.s1').text(arr[i]);
                }
            } else {
                for (var j = 0; j <= i; j++) {
                    aLi.eq(j).find('img').attr('src', '${ctxPath}/resources/weixin/images/hao.png');
                    $('.s1').text(arr[i]);
                }
            }
        }, function () {
            for (var i = 0; i < leng; i++) {
                aLi.eq(i).find('img').attr('src', arr2[i]);
            }
            $('.s1').val(s1);
        });

    });
</script>